<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面 任何其他内容都*必须*跟随其后 -->

    <title>医学图像分割</title>

    <script src="../js/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap -->
    <link href="../js/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件 你也可以根据需要只加载单个插件 -->
    <script src="../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <script type="text/JavaScript" src="../js/jQuery.print.js"></script>

    <script>

        var web_context = "/web-0.0.1-SNAPSHOT";

        $(function() {
            // $("#header").load("header.html");
            // $("#footer").load("footer.html")

            //图片加载
            $("#inputFile").change(function () {
                var file = this.files[0];
                if (window.FileReader) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    //监听文件读取结束后事件
                    reader.onloadend = function (e) {
                        //e.target.result就是最后的路径地址
                        $("#original_img_p").css('display', 'none');
                        $("#original_img").css('display', 'block');
                        $("#original_img").attr("src", e.target.result);
                        $("#export_org_img").attr("src", e.target.result);
                    };
                }
            });

            //一键分割
            $("#split_btn").click(function () {
                var str = "";
                $("input[name='models']:checked").each(function () {
                    str += $(this).val() + ",";
                });
                // FormData格式，上传文件和模型选项
                var formData = new FormData();
                formData.append("inputFile", document.getElementById("inputFile").files[0]);
                formData.append("models", str);
                // alert(formData);
                $.ajax({
                    type: "post",
                    data: formData,
                    contentType: false,
                    url: web_context + "/split/upload",//文件服务器
                    cache : false,
                    processData : false,
                    success: function (data) {
                        //处理结果返回
                        show_res(data);
                    },
                    error: function (data) {

                    }
                })
            });

            $("#export_btn").click(function () {

                $("#export_main").print({
                    globalStyles: false ,//是否包含父文档的样式，默认为true
                    mediaPrint: false ,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                    stylesheet: null ,//外部样式表的URL地址，默认为null
                    noPrintSelector: ".no-print" ,//不想打印的元素的jQuery选择器，默认为".no-print"
                    iframe: true ,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
                    append: null ,// 将内容添加到打印内容的后面
                    prepend: null ,//将内容添加到打印内容的前面，可以用来作为要打印内容
                    deferred: $.Deferred()// 回调函数
                })
            });

        });

        function show_res(data) {
            $("#res_show_p").css('display', 'none');
            var html = "<div id=\"res_show_div\" style=\"display: none;\" class=\"carousel slide\" data-ride=\"carousel\">";
            html += "<div id=\"res_show_div_imgs\" class=\"carousel-inner\" role=\"listbox\">";
            var pdf = "";
            for(var item in data.data){
                var img = data.data[item];
                if(item == 0){
                    html += "<div class=\"item active\">\n" +
                        "<img src='"+ img.imgPath +"' alt=\"...\" style=\"width: 100%\">\n" +
                        "<div class=\"carousel-caption\">\n" +
                        "<h3>"+ img.desc +"</h3>\n" +
                        "</div>\n" +
                        "</div>";
                }else {
                    html += "<div class=\'item\'>\n" +
                        "<img src='"+ img.imgPath +"' alt=\"...\" style=\"width: 100%\">\n" +
                        "<div class=\"carousel-caption\">\n" +
                        "<h3>"+ img.desc +"</h3>\n" +
                        "</div>\n" +
                        "</div>";
                }

                //for pdf
                pdf += "<div>\n" +
                    "<p id=\"export_model\">"+ img.desc +"</p>\n" +
                    "<img src='"+ img.imgPath +"' style=\"max-width: 300px\">\n" +
                    "</div>";

            }
            html += "</div>";
            html += "<a class=\"left carousel-control\" href=\"#res_show_div\" role=\"button\" data-slide=\"prev\">\n" +
                "                        <span class=\"glyphicon glyphicon-chevron-left\" aria-hidden=\"true\"></span>\n" +
                "                        <span class=\"sr-only\">Previous</span>\n" +
                "                    </a>\n" +
                "                    <a class=\"right carousel-control\" href=\"#res_show_div\" role=\"button\" data-slide=\"next\">\n" +
                "                        <span class=\"glyphicon glyphicon-chevron-right\" aria-hidden=\"true\"></span>\n" +
                "                        <span class=\"sr-only\">Next</span>\n" +
                "                    </a>";
            html += "</div>";
            $("#res_show_div_father").html(html);
            $("#res_show_div").css('display', 'block');

            $("#export_imgs").html(pdf);
        }

    </script>

</head>
<body>
    <!--<h2>AI医学影像自动化处理系统</h2>-->
    <div class="page-header" style="margin-top: 10px; margin-bottom: 0; border-bottom: #286090 3px solid">
        <h2>&nbsp;&nbsp;AI医学影像自动化处理系统 <small> v0.1</small></h2>
    </div>
    <ol class="breadcrumb" style="margin-bottom: 5px">
        <li><a href="#">医学图像分割</a></li>
        <li class="active">主页面</li>
    </ol>

    <div class="container-fluid" style="margin-left: 3%; margin-right: 3%">
        <div class="row">
            <label for="inputFile"  class="col-md-1">导入原始图像</label>
            <form id="upload_form" enctype="multipart/form-data">
                <input type="file" class="col-md-4" id="inputFile" name="inputFile" accept="image/png,image/jpg,image/jpeg,image/bmp">
            </form>
        </div>

        <div class="row" style="margin-top: 5px;">
            <div class="col-md-5" style="height: 500px;">
                <p id="original_img_p" style="text-align: center; line-height: 500px; background-color: #dbdbdb;">原图展示区</p>
                <img id="original_img" style="display:none; width: 100%; max-height: 500px" src="../img/gt.JPG" alt="" class="img-thumbnail">
            </div>
            <div class="col-md-2">
                <h4>模型选择（可多选）</h4>
                <div class="checkbox">
                    <label>
                        <input name="models" type="checkbox" value="TransUNet">TransUNet
                    </label>
                    <label>
                        <input name="models" type="checkbox" value="Swin-UNet">Swin-UNet
                    </label>
                    <label>
                        <input name="models" type="checkbox" value="STrongUNet">STrongUNet
                    </label>
                </div>
                <div style="margin-top: 50%">
                    <button id="split_btn" type="button" class="btn btn-primary btn-lg btn-block">一键分割</button>
                    <button id="export_btn" type="button" class="btn btn-default btn-lg btn-block">导出结果</button>
                </div>

            </div>
            <div class="col-md-5" style="height: 500px;">
                <p id="res_show_p" style="text-align: center; line-height: 500px; background-color: #dbdbdb;">效果图展示区</p>
                <div id="res_show_div_father">
                    <!--这里放轮播图代码 -->
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-5">
                <h3>病人信息（选填）</h3>
                    <form class="form-horizontal">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 5px">
                        <label for="gender" class="col-sm-2 control-label">性别</label>
                        <div class="radio col-md-10" id="gender">
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" checked id="male" value="male"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="female" value="female"> 女
                            </label>
                        </div>
                        <!--<div class="col-sm-10">-->
                            <!--<input type="password" class="form-control" id="gender" placeholder="请输入性别">-->
                        <!--</div>-->
                    </div>
                    <div class="form-group" style="margin-top: 5px">
                        <label for="age" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="age" >
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-2"></div>
            <div class="col-md-2">
                <h3>分割结果</h3>

            </div>
            <div class="col-md-3">
                <h3>医师意见</h3>
                <form class="form-horizontal">
                    <div class="form-group">
                        <textarea id="opinion" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="evaluate" class="col-md-2">评价</label>
                        <div class="col-md-10">
                            <select id="evaluate" class="form-control col-md-10">
                                <option>A</option>
                                <option>B</option>
                                <option>C</option>
                                <option>D</option>
                                <option>E</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>

    <!--用于导出pdf-->
    <div id="export" style="display: none">
        <div id="export_main">
            <h2>医学图像分割结果报告单</h2>
            <div class="row">
                <div class="col-md-2">病人姓名：<span id="export_name"></span></div>
                <div class="col-md-2">性别：<span id="export_gender"></span></div>
                <div class="col-md-2">年龄：<span id="export_age"></span></div>
            </div>
            <h4>分割结果</h4>
            <div class="row">
                <span id="export_result"></span>
            </div>
            <h4>医师意见</h4>
            <div class="row">
                <span id="export_opinion"></span>
            </div>
            <h4>医师评价</h4>
            <div class="row">
                <span id="export_evaluate"></span>
            </div>
            <h4>原始医学图像</h4>
            <div>
                <img id="export_org_img" src="">
            </div>
            <h4>AI分割图像</h4>
            <div id="export_imgs">

            </div>
        </div>
    </div>


    <div id="footer" style="height: 300px;"></div>
</body>
</html>